<!DOCTYPE html>
<html>
<!---------------------------------------------------------
Auther:：Fin;  Version：Autotestplat-V2.7
----------------------------------------------------------->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>接口测试 - 添加接口</title>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/fileinput.min.css">
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <script src="/static/js/public.js"></script>
    <script src="/static/js/testcase.js"></script>
    <script type="text/javascript" charset="gbk" src="/static/js/fileinput.min.js"></script>
    <script>
         window.onload = function(){
             if(loginVerify() == 200){
             }
             showRequestTab()
             setSelect()
        }

    </script>
</head>
<body>
<form target="_parent" id="form_add_window" method="post" action='/autotest/apitestcase/add/'>
    {% csrf_token %}
    <div class="modal-body">
        <div class="row" id="no_div2">
            <div class="col-md-12">
                <div class="form-group">
                    <div class="col-md-12">
                        <div class="input-group" style="display:none;">
                        <span  class="input-group-addon" style="font-size: 12px;display: none">产品:</span>
                                    <select class="selectpicker form-control" name="add_product_id"  style="width: 173px;font-size: 12px;display: none">
                                        {% for  product  in product_alls %}
                                                <option> {{product.product_name}} </option>
                                        {% endfor %}
                                     </select>
                        </div>
                    </div>

                    <div class="col-md-8">
                        <div class="input-group">
                            <span class="input-group-addon" style="font-size: 12px">名称</span>
                            <input id="add_name" name="add_name" type="text" class="form-control" value="" required=""
                                   style="font-size: 12px;width: 608px">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="input-group">
                           <span class="input-group-addon" style="font-size: 12px">环境</span>
                              <select class="selectpicker form-control" id="add_url_host" name="add_url_host">
                                  {% for  env_para  in env_paras %}
                                      <option>{ {{env_para.keywords}} }</option>
                                  {% endfor %}
                              </select>
                        </div>
                    </div>
                    <br><br><br>
                    <div class="col-md-2">
                        <div class="input-group">
                           <span class="input-group-addon" style="font-size: 12px">请求</span>
                                    <select class="selectpicker form-control" id="mode" name="mode">
                                        <option style="color: chocolate; font-weight: bold;">POST</option>
                                        <option style="color: green; font-weight: bold;">GET</option>
                                        <option style="color: blue; font-weight: bold;">PUT</option>
                                        <option style="color: maroon; font-weight: bold;">DELETE</option>
                                        <option style="color: mediumslateblue; font-weight: bold;">PATCH</option>
                                        <option style="color: green; font-weight: bold;">HEAD</option>
                                        <option style="color: rosybrown; font-weight: bold;">OPTIONS</option>
                                    </select>
                        </div>
                    </div>
                     <div class="col-md-6">
                                <input style="width: 516px;margin-left: -25px; padding-left: 3px;" id="add_url" name="add_url" type="text" class="form-control" value="{{ rec1.url }}" required="" oninvalid="setCustomValidity('请填写正确的URL');" oninput="setCustomValidity('');" spellcheck="false">
                    </div>
                    <div class="col-md-1">
                        <div class="form-group">
                          <div class="col-md-12">
                            <button style="width: 70px; height: 33px;padding-left: 12px;line-height: 0px;margin-left: -12px; " type="button" class="btn btn-success" id="submit" onclick="start_interface_send(this)">发送</button>
                          </div>
                        </div>
                    </div>
                    <div class="col-md-1">
                        <div class="form-group">
                          <div class="col-md-12">
                            <button style="width: 70px; height: 33px;padding-left: 12px;line-height: 0px;margin-left: -12px;" type="submit" class="btn btn-primary" id="submit" value="submit">保存</button>
                          </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <br>

    <div class="row">
        <div class="col-md-11" style="margin-left: 10px;border: none">
            <ul id="requesttab" class="nav nav-tabs">
                <li class="active" style="text-align: center;font-size: 12px"><a style="color: black" href="#requestbody" data-toggle="tab">请求Body </a></li>
                <li style="text-align: center;font-size: 12px;"><a style="color: black" href="#params" data-toggle="tab">参数 </a></li>
                <li style="text-align: center;font-size: 12px;"><a style="color: black" href="#head" data-toggle="tab">头信息 </a></li>
                <li style="text-align: center;font-size: 12px"><a style="color: black" href="#auth" data-toggle="tab">认证 </a></li>
                <li style="text-align: center;font-size: 12px"><a style="color: black" href="#assert" data-toggle="tab">断言 </a></li>
                <li style="text-align: center;font-size: 12px"><a style="color: black" href="#match" data-toggle="tab">正则表达式 </a></li>
            </ul>

            <div id="requestbody" class="tab-content" >
               <div class="row">
                   <div class="col-md-10">
                       <div class="input-group">
                        <textarea class="formated_dict" id="formated_dict" name="formated_dict" rows="5" style="width:925px"></textarea>
                       </div>
                   </div>
                </div>
            </div>

            <div id="params" name="params" class="tab-content" style="display:none;">
                <div class="row">
                    <div class="col-md-10">
                        <div class="input-group">
                            <input id="params_key" name="params_key" type="text" class="form-control" style="width:260px;font-size: 12px;text-align: center" placeholder="Key"></input>
                            <input id="params_value" name="params_value" type="text" class="form-control" style="width:260px;font-size: 12px;text-align: center" placeholder="Value"></input>
                            <td style="width: 80px;text-align: center;">
                                    <div class="btn-group">
                                    <button type="button" class="btn btn-default"
                                            onclick="add_params_add_row(this)">+
                                    </button>
                                    </div>
                            </td>
                            <td style="width: 80px;text-align: center;">
                                    <div class="btn-group">
                                    <button type="button" class="btn btn-default" disabled="disabled">-</button>
                                    </div>
                            </td>
                             <input id="params_key" name="params_key" type="text" class="form-control" style="width:260px;font-size: 12px;text-align: center" placeholder="Key"></input>
                            <input id="params_value" name="params_value" type="text" class="form-control" style="width:260px;font-size: 12px;text-align: center" placeholder="Value"></input>
                            <td style="width: 80px;text-align: center;">
                                    <div class="btn-group">
                                    <button type="button" class="btn btn-default"
                                            onclick="add_params_add_row(this)">+
                                    </button>
                                    </div>
                            </td>
                            <td style="width: 80px;text-align: center;">
                                    <div class="btn-group">
                                    <button type="button" class="btn btn-default" disabled="disabled">-</button>
                                    </div>
                            </td>
                             <input id="params_key" name="params_key" type="text" class="form-control" style="width:260px;font-size: 12px;text-align: center" placeholder="Key"></input>
                            <input id="params_value" name="params_value" type="text" class="form-control" style="width:260px;font-size: 12px;text-align: center" placeholder="Value"></input>
                            <td style="width: 80px;text-align: center;">
                                    <div class="btn-group">
                                    <button type="button" class="btn btn-default"
                                            onclick="add_params_add_row(this)">+
                                    </button>
                                    </div>
                            </td>
                            <td style="width: 80px;text-align: center;">
                                    <div class="btn-group">
                                    <button type="button" class="btn btn-default" disabled="disabled">-</button>
                                    </div>
                            </td>
                         </div>
                    </div>
                </div>
            </div>

            <div id="head" name="head" class="tab-content" style="display:none;">
                <div class="row">
                    <div class="col-md-10">
                        <div class="input-group">
                            <input id="head_key" name="head_key" type="text" class="form-control" style="width:260px;font-size: 12px;text-align: center" placeholder="Key" value="Content-Type"></input>
                            <input id="head_value" name="head_value" type="text" class="form-control" style="width:260px;font-size: 12px;text-align: center" placeholder="Value" value="application/json; charset=utf-8"></input>
                            <td style="width: 80px;text-align: center;">
                                    <div class="btn-group">
                                    <button type="button" class="btn btn-default"
                                            onclick="add_head_add_row(this)">+
                                    </button>
                                    </div>
                            </td>
                            <td style="width: 80px;text-align: center;">
                                    <div class="btn-group">
                                    <button type="button" class="btn btn-default" disabled="disabled">-</button>
                                    </div>
                            </td>
                            <input id="head_key" name="head_key" type="text" class="form-control" style="width:260px;font-size: 12px;text-align: center" placeholder="Key" value="Accept"></input>
                            <input id="head_value" name="head_value" type="text" class="form-control" style="width:260px;font-size: 12px;text-align: center" placeholder="Value"></input>
                            <td style="width: 80px;text-align: center;">
                                    <div class="btn-group">
                                    <button type="button" class="btn btn-default"
                                            onclick="add_head_add_row(this)">+
                                    </button>
                                    </div>
                            </td>
                            <td style="width: 80px;text-align: center;">
                                    <div class="btn-group">
                                    <button type="button" class="btn btn-default" disabled="disabled">-</button>
                                    </div>
                            </td>
                            <input id="head_key" name="head_key" type="text" class="form-control" style="width:260px;font-size: 12px;text-align: center" placeholder="Key" value="Cookie"></input>
                            <input id="head_value" name="head_value" type="text" class="form-control" style="width:260px;font-size: 12px;text-align: center" placeholder="Value"></input>
                            <td style="width: 80px;text-align: center;">
                                    <div class="btn-group">
                                    <button type="button" class="btn btn-default"
                                            onclick="add_head_add_row(this)">+
                                    </button>
                                    </div>
                            </td>
                            <td style="width: 80px;text-align: center;">
                                    <div class="btn-group">
                                    <button type="button" class="btn btn-default" disabled="disabled">-</button>
                                    </div>
                            </td>
                        </div>
                    </div>
                </div>
            </div>

            <div id="auth" name="auth" class="tab-content" style="display:none;">
                <div class="row">
                    <div class="col-md-10">
                        <div class="input-group">
                            <input id="head_key" name="head_key" type="text" class="form-control" style="width:260px;font-size: 12px;text-align: center" placeholder="Key" value="token"></input>
                            <select class="selectpicker form-control" id="head_value" name="head_value" style="width:260px;font-size: 12px;text-align: center">
                                  {% for  auth_para  in auth_paras %}
                                      <option>{ {{ auth_para.keywords }} }</option>
                                  {% endfor %}
                              </select>
                            <td style="width: 80px;text-align: center;">
                                    <div class="btn-group">
                                    <button type="button" class="btn btn-default" disabled="disabled">+</button>
                                    </div>
                            </td>
                            <td style="width: 80px;text-align: center;">
                                    <div class="btn-group">
                                    <button type="button" class="btn btn-default" disabled="disabled">-</button>
                                    </div>
                            </td>
                        </div>
                    </div>
                </div>
            </div>

            <div id="assert" name="assert" class="tab-content" style="display: none">
                <div class="col-md-4">
                        <div class="col-md-12">
                            <div class="input-group">
                                <input id="assert_keywords_old" name="assert_keywords_old" type="text" class="form-control"  style="width: 520px;font-size: 12px;text-align: center;" placeholder="匹配内容" spellcheck="false"></input>
                            </div>
                        </div>
                </div>
            </div>

            <div id="match" name="match" class="tab-content" style="display: none">
                <div class="col-md-11">
                    <div class="table-responsive" style="margin-left: 10px">
                                    <div class="input-group">
                                        <input type="text" name="resp_add_name" class="form-control" style="width:105px;font-size: 12px;text-align: center" placeholder="描述">
                                        <input type="text" name="resp_add_keywords" class="form-control" style="width:105px;font-size: 12px;text-align: center" placeholder="关键字">
                                        <input type="text" name="resp_add_left" class="form-control" style="width:105px;font-size: 12px;text-align: center" placeholder="左边界">
                                        <input type="text" name="resp_add_right" class="form-control" style="width:105px;font-size: 12px;text-align: center" placeholder="右边界">
                                        <input type="text" name="resp_add_index" class="form-control" style="width:60px;font-size: 12px;text-align: center" value="0" placeholder="索引">
                                        <td style="width: 80px;text-align: center;">
                                            <div class="btn-group">
                                                <button type="button" class="btn btn-default" onclick="add_res_add_row(this)">+</button>
                                            </div>
                                        </td>
                                        <td style="width: 80px;text-align: center;">
                                            <div class="btn-group">
                                                <button type="button" class="btn btn-default" disabled="disabled">-</button>
                                            </div>
                                        </td>
                                    </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <br>
     <div class="row">
      <div class="col-md-11">
        <ul id="responsetab" class="nav nav-tabs" style="margin-left: 10px">
           <li style="text-align: center;font-size: 12px"><a href="#response" data-toggle="tab" id='res' style="color: black;font-weight: bold">响应Body</a></li>
           <li style="text-align: center;font-size: 12px"><a href="#requesthead" data-toggle="tab" id="reqh" style="color:black;display: none">请求信息</a></li>
           <li style="text-align: center;font-size: 12px"><a href="#assertresult" data-toggle="tab" id="rst" style="color:black;display: none">断言结果</a></li>
        </ul>
      </div>
      <div id="responsecodehtml"></div>
    </div>

     <div class="row">
         <div class="col-md-12" style="margin-left: 10px">
             <div id="responseTabContent" class="tab-content" style="display: none">
               <div class="tab-content" id="response">
                  <textarea id="responsedata" rows="15" name="responsedata" style="width:925px;"></textarea>
               </div>
               <div class="tab-content" id="requesthead" style="display: none">
                  <textarea id="reqhead" rows="15" name="reqhead" style="width:925px;"></textarea>
               </div>
               <div class="tab-content" id="assertresult" style="display: none">
                  <textarea id="assertrst" rows="5" name="assertrst" style="width:925px;"></textarea>
               </div>
             </div>
         </div>
     </div>
   </div>

        </div>

    </div>
</form>

<script type="text/javascript">

    function start_interface_send(ele) {
        document.getElementById('responseTabContent').style.display = 'block';
        document.getElementById('res').style.fontWeight = 'normal';
        document.getElementById('rst').style.display = 'block';
        document.getElementById('reqh').style.display = 'block';
        $('#responsedata').empty();
        $('#reqhead').empty();
        $('#assertrst').empty();
        $('#response_code').empty();
        var resCodeHtml_pass = '<div class="col-md-3" style="text-align: left;margin-left:-200px;margin-top:17px;font-size: 12px;color: green">响应码：<span id="response_code"></span> </div>';
        var resCodeHtml_fail = '<div class="col-md-3" style="text-align: left;margin-left:-200px;margin-top:17px;font-size: 12px;color: red">响应码：<span id="response_code"></span> </div>';
        var interface_id = '';
        var interface_name = $('#add_name')[0].value;
        var interface_body = $('#formated_dict')[0].value;
        var interface_env = $('#add_url_host')[0].value;
        var interface_mode = $('#mode')[0].value;
        var interface_url = $('#add_url')[0].value;
        var headKeys = document.getElementsByName('head_key');
        var headValues = document.getElementsByName('head_value');
        var values = [];
        for (var i = 0; i < headKeys.length; i++) {
            var key = headKeys[i].value;
            var value = headValues[i].value;
            var obj = {};
            obj[key] = value;
            values.push(obj);
        }
        var finalDict = values.reduce(function(acc, curr) {return Object.assign(acc, curr);}, {});
        var interface_head = finalDict
        var paramKeys = document.getElementsByName('params_key');
        var paramValues = document.getElementsByName('params_value');
        var p_values = [];
        for (var i = 0; i < paramKeys.length; i++) {
            var key = paramKeys[i].value;
            var value = paramValues[i].value;
            var obj = {};
            obj[key] = value;
            p_values.push(obj);
        }
        var p_finalDict = p_values.reduce(function(acc, curr) {return Object.assign(acc, curr);}, {});
        var interface_params = p_finalDict;
        var interface_assert = $('#assert_keywords_old')[0].value;
        $.ajax({
            url: "/autotest/apitestcase/send/",
            data: JSON.stringify({
                interface_id:interface_id,
                interface_name: interface_name,
                interface_env:interface_env,
                interface_mode:interface_mode,
                interface_url:interface_url,
                interface_head:interface_head,
                interface_params:interface_params,
                interface_body:interface_body,
                interface_assert:interface_assert,
                csrfmiddlewaretoken: '{{ csrf_token }}'
            }),
            headers:{'X-CSRFToken': '{{ csrf_token }}'},
            contentType: 'application/json',
            type: "POST",
            traditional: true,
            success: function (result) {
                if(result.toLowerCase().includes('html') && result.toLowerCase().includes('body') && result.toLowerCase().includes('head')){
                    result=result.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
                    if(result.includes('【响应数据】：')){
                        respones_body = result.split('【响应数据】：')[1].split('【响应时间】')[0]
                        $('#responsedata').append(respones_body);
                    }
                    else {
                        $('#responsedata').append(result)
                    }
                }
                else {
                    if(result.includes('【响应数据】：')){
                        respones_body = result.split('【响应数据】：')[1].split('【响应时间】')[0]
                        respones_body=JSON.parse(respones_body);
                        $('#responsedata').append(JSON.stringify(respones_body,null,4));
                    }
                    else {
                        $('#responsedata').append(result)
                    }
                }
                respones_code=result.split('【响应状态码】：')[1].split('【响应数据】')[0];
                response_time=result.split('【响应时间】：')[1].split('秒')[0]
                if(respones_code.includes(200)){
                    $('#responsecodehtml').html(resCodeHtml_pass);
                }
                else {
                    $('#responsecodehtml').html(resCodeHtml_fail);
                }
                $('#response_code').append(respones_code+'&nbsp;&nbsp;&nbsp;'+response_time+'秒')
                respones_assert=result.split('【断言】： ')[1]
                $('#assertrst').append('【断言】： '+respones_assert)
                respones_ass=respones_assert.split('【测试结果】：')[0]
                respones_ast=respones_assert.split('【测试结果】：')[1]
                if(respones_ast.includes('测试失败，断言不匹配')){
                    document.getElementById('rst').style.color='red'
                }else if(respones_ass.replace(/\s+/g, '')===''){
                    document.getElementById('rst').style.color='red'
                }else{
                    document.getElementById('rst').style.color='black'
                }
                request_data=result.split('【Cookies】')[0]
                $('#reqhead').append(request_data)
            },
            fail: function (result) {
            }
        });
    }



</script>

</body>
</html>